<template>
    <el-drawer v-model="show" title="事件评价" :close-on-click-modal="false" :close-on-press-escape="false" :size='500'
        :class="$style['drawer-container']">
        <el-form label-width="80px">
            <el-form-item :key="item.key" v-for="item in rules" :label="item.name">
                <el-input type="textarea" :rows="3" v-model="item.value" :placeholder="'请输入' + item.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button @click=" drawer = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { fetchEventRulesEvaluates, fetchCreateEvaluateLogs } from '@/api/event.rules.services'
import { ElMessage } from 'element-plus'
const show = ref(false)
const onSubmit = async () => {
    const params = {
        ids: event_ids.value,
        content: rules.value
    }
    const result = await fetchCreateEvaluateLogs(params)
    if (result.code == 1) {
        show.value = false
        ElMessage.success('评价成功')
    }
}
const event_ids = ref(0)
const open = (ids) => {
    event_ids.value = ids.map(item => item.event_id)
    show.value = true
}
const rules = ref([])
const initEventRulesEvaluate = async () => {
    const result = await fetchEventRulesEvaluates()
    if (result.code == 1) {
        rules.value = result.data
    }

}
onMounted(() => {
    initEventRulesEvaluate()
})
defineExpose({
    open
})
</script>
<style lang="scss" module>
.drawer-container {
    display: flex;

    & [class~='el-drawer__header'] {
        margin-bottom: 10px;
    }

    & [class~='el-drawer__body'] {
        flex: 1;
        overflow-y: auto;
        @include scrollbar();
    }
}
</style>